<template>
  <div class="content">
    <div class="menu">
      <el-row :gutter="30">
        <el-col :span="2" :offset="0">
          <el-button type="primary" icon="el-icon-plus" @click="open_save_view('add',null)">添加</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="table">
      <el-table :data="category_data" style="width: 100%" max-height="500px" stripe>
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="open_save_view('update',scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delete_data(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="save_view">
        <el-dialog
          :title="current_form_data.id == null ? '添加活动类型' : '编辑活动类型'"
          :visible.sync="save_view_display"
          top="1vh"
        >
          <el-form :model="current_form_data" :rules="rules" top="1vh">
            <el-form-item label="编号">
              <el-input disabled v-model="current_form_data.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="title">
              <el-input v-model="current_form_data.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="save_view_display = false">取 消</el-button>
            <el-button type="primary" @click="save_data">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { categorySelectAll, categorySave, categoryDelete } from '@/api/requests/base'
export default {
  name: 'news-manage',
  data () {
    return {
      category_data: [],
      save_view_display: false,
      current_form_data: {},
      rules: {}
    }
  },
  created () {
    this.get_category_data_all()


  },
  methods: {

    get_category_data_all () {
      categorySelectAll().then(res => {
        this.category_data = res.data
      })
    },
    open_save_view (type, data) {
      if (type == 'add') {
        this.current_form_data = {}
      } else if (type == 'update') {
        this.current_form_data = data
      }

      this.save_view_display = true

    },
    save_data () {

      categorySave(this.current_form_data).then(res => {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success'
        });

        this.save_view_display = false
        this.get_category_data_all()
      })


    },
    delete_data (id) {



      this.$confirm('如果此类型下拥有活动，则活动也将被删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        categoryDelete(id).then(res => {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success'
          });
          this.get_category_data_all()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });















    }
  },
}
</script>


<style lang="scss" scoped>
.content {
  padding: 40px;
  .el-dialog {
    overflow: auto;
  }
  .el-table {
    margin-top: 30px;
  }
}
</style>
